<template>
  <div class='suorce'>
      <TabNav title="素材圈" lftext="素材中心" :activeBc="true" >
        <img src="@/assets/img/source/top_addIcon.png" alt="" class="NavRightImg"> 
    </TabNav>
    <!-- 滑动区域 -->
    <div class="scroll"> 
    <scroll 
    @scrollLocation="scrollLocation"
    :probeType="3"
    :pullUpLoad="true"
    :pullDownRefresh="true"
    @pullingDown="pullingDown"
    @pullingUp="pullingUp"
    ref="scroll"
    >  
    <!-- 素材圈背景 -->
    <div class="suorceBac">
      <img src="@/assets/img/source/mysources.png" alt="" class="suorceBacImg">
      <div class='suorceBacDw'>
          <span>欧阳夏天</span>
          <img src="@/assets/img/source/logo.png" alt="" srcset="">
      </div>
    </div>
    <!-- 内容 -->
    <div class="suorce-content">
          <!-- 时间、转发热度排行榜 -->
        <div class="rankingList">
              <div :class="[ isActive==1?'active':'' ]" @click="sortHandler(1)">按发布时间排序</div>
              <p></p>
              <div :class="[ isActive==2?'active':'' ]" @click="sortHandler(2)">按转发热度排序</div>
         </div>
         <!-- 素材 -->
        <SourceList :suorceList="dataList"></SourceList> 
     </div>
     </scroll>
  </div>
  </div>
</template>

<script>
import TabNav from '@/components/content/NavBar.vue'
import SourceList from '@/components/content/source/SourceList.vue'
import scroll from '@/components/common/scroll/Scroll.vue'
import {getRequstData} from '@/network/source/index'
export default {
  name: 'Source',
  data () {
    return {
       isActive:1,
       pageIndex:0,
       pageSize:10,
       orderType:1,
       dataList:[],
       lock:false //请求数据完才让在请求 
    };
  },
  components: {
    TabNav,
    SourceList,
    scroll
  },
  computed: {}, 
    
  mounted(){
       this.RequstData();
       this.$bus.$on('loadImg',()=>{
        //  图片加载完 之后调一次refresh 重新计算 better-scroll，
        //当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。 
        // 解决有时候图片还没加载完成滑动不了的BUG
         this.$refs.scroll.refresh()
       })
  },
  methods: {
    // 获取素材数据
   async RequstData(){
        this.lock=true
        let res=await  getRequstData(this.pageIndex,this.pageSize,this.orderType)
        let _data=res.data.result.list; 
        
        if(_data){
              _data.map(v => {
           v.imgs = [ v.pic1,v.pic2,v.pic3,v.pic4,v.pic5,v.pic6,v.pic7,v.pic8,v.pic9].filter(item => {
            return item != "";
          });
          v.operation = false;})
          // pageIndex==0 可能是下拉刷新 不能push
         if(!this.pageIndex){
            this.dataList=_data
        }else{
             this.dataList.push(..._data)
        }
         this.pageIndex++
         this.lock=false
        }
    }, 
    // 排序 (按时间、转发数)
    sortHandler(type) {
      this.isActive = type;
      this.orderType = type;
      this.pageIndex = 0;
      this.RequstData();
   },
    scrollLocation(options){
    },
    // 上拉加载更多
    pullingUp(){
      if(!this.lock) this.RequstData();
       this.$refs.scroll.finishPullUp()
    },
    // 下拉刷新
    pullingDown(){
      this.pageIndex=0
     if(!this.lock) this.RequstData();
       this.$refs.scroll.finishPullDown()
    }
  }
}

</script>
<style lang='less' scoped>
.scroll{
 padding-top:46px;
 height: 100vh;
 padding-bottom:50px;
}
.NavRightImg{
  height:20px;
  width: 20px;
}
.suorceBac{
  position: relative;
  .suorceBacImg{
    display: block;
    width: 100%;
    height: 240px;
  }
  .suorceBacDw{
    position: absolute;
    right: 15px;
    bottom:-30px;
    display:flex;
    justify-content: space-between;
    span{
      font-size: 15px;
      margin-right: 15px;
      color: #fff;
      margin-top:25px
    }
    img{
       width: 90px;
       height: 100px;
       border-radius:5px;
    }
  }
}
.suorce-content{
  padding: 0 15px 30px 15px;
  margin-top:65px;
}
.rankingList{
  padding: 10px 0;
  border-top:1px solid #EBEBEB;
  border-bottom:1px solid #EBEBEB;
  display: flex;
  justify-content: space-evenly;
  font-size: 18px;
  color: #767676;
  margin-bottom: 30px;
  .active{
    color: var(--size_color);
  }
  p{
    height:26px;
    width: 2px;
    background: var(--bac_color);
  }
}
</style>
 
